<template>
    <div>
        <div class="tab">
            <div
                :to="item.router"
                v-for="(item, index) in tabs"
                :key="index"
                @click="tabClick(index)"
                :class="tab ==index?'tabThis':''"
            >
                {{item.title}}

            </div>
        </div>

        <keep-alive>
            <router-view></router-view>
        </keep-alive>
    </div>
</template>
<script>
export default {
    name: "order",
    data() {
        return {
            tab: 0,
            tabs: [
                { title: '全部', router: '/order/orderAll' },
                { title: '待使用', router: '/order/orderUse' },
                { title: '已使用', router: '/order/orderFinish' },
            ]
        };
    },
    methods: {
        // 方法
        tabClick(key) {
            if (this.tab !== key) {
                this.tab = key
                this.$router.replace(this.tabs[key].router);
            }
        },
        infoData() {
            let params = {};
            this.$post("User/getMember", params)
                .then(res => {
                    if (res.code === 20000) { }
                })
                .catch(err => { });
        }
    },
    beforeCreate() {
        document.querySelector("body").setAttribute("style", "background-color:#f0effe");
    },
    created() {

        let href = window.location.href;
        if (href.includes("order/orderAll")) {
            this.tab = 0
        } else if (href.includes("order/orderUse")) {
            this.tab = 1
        } else if (href.includes("order/orderFinish")) {
            this.tab = 2
        }
        // 实例创建完成
        // this.infoData();
    },
};
</script>
<style lang="less" scoped>
.tab {
    position: fixed;
    top: 0;
    padding: 0 12px;
    box-sizing: border-box;
    width: 100%;
    background: #f0effe;
    z-index: 10;
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    > div {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100px;
        height: 30px;
        background-color: #cbc5ff;
        border-radius: 15px;
        font-size: 16px;
        color: #4e59ff;
    }
    .tabThis {
        background-image: linear-gradient(90deg, #817bff 0%, #4e59ff 100%);
        border-radius: 15px;
        color: #fff;
    }
}
</style>